<template>
  <div class="flex1">
    <div class="operation-item gui-paddingn flex justify-between">
      <div>
        <nuxt-link to="/admin/channel" class="gda-btn gda-btn-primary pointer ">
          <i class="iconfont icon-fabu mr5"></i>返回课程
        </nuxt-link>
      </div>
      <div>
        <input type="text" placeholder="请输入标题" @blur="handleSearch"  v-model="queryParams.keyword" class="binput mr10"/>
      </div>
    </div>
    <div class="gui-padding">
      <div>
        <table class="k-data-table-table w100" style="table-layout: auto;">
          <thead class="n-data-table-thead">
          <tr class="n-data-table-tr">
            <th colspan="1" rowspan="1" data-col-key="id" class="n-data-table-th">
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">编号</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">标识ID</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">兑换码</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">是否使用</div>
              </div>
            </th>
            <th>
              <div class="n-data-table-th__title-wrapper">
                <div class="n-data-table-th__title">操作</div>
              </div>
            </th>
          </tr>
          </thead>
          <tbody class="n-data-table-tbody">
          <template v-for="(item,index) in dataList">
            <tr class="n-data-table-tr">
              <td> {{ item.id }}</td>
              <td>
                <input v-model="item.opid" maxlength="100" @blur="handleUpdateStatus(item,'opid','opid')" class="binput" placeholder="请填写"/>
              </td>
              <td>
                <input v-model="item.code" maxlength="100" @blur="handleUpdateStatus(item,'code','code')" class="binput" placeholder="请填写"/>
              </td>
              <td>
                <select class="binput" v-model.number="item.mark" @change="handleUpdateStatus(item,'mark','mark')">
                  <option :value="1">已使用</option>
                  <option :value="0">未使用</option>
                </select>
              </td>
              <td colspan="1" rowspan="1" data-col-key="operator"
                  class="n-data-table-td n-data-table-td--last-col n-data-table-td--last-row">
                <div class="flex align-center">
                  <a @click.prevent="handleUpdateStatus(item)"  class="ml5 green pointer">{{item.mark == 1 ?"已使用":"未使用"}}
                  </a>
                  <div class="ml5">
                    <n-popconfirm
                        positive-text="确定"
                        negative-text="取消"
                        @positive-click="handleDelTemplate(item,index)"
                    >
                      <template #trigger>
                        <span class="comment-action-del pointer red"><i class="iconfont icon-shanchu2 mr2"></i>删除</span>
                      </template>
                      你确定删除吗？
                    </n-popconfirm>
                  </div>
                </div>
              </td>
            </tr>
          </template>
          <tr class="n-data-table-tr" style="background: #eee;">
            <td></td>
            <td>
              <input v-model="currentObj.opid" maxlength="100"  class="binput" placeholder="请填写"/>
            </td>
            <td>
              <input v-model="currentObj.code" maxlength="100"  class="binput" placeholder="请填写"/>
            </td>
            <td>
              <select v-model.number="currentObj.mark" class="binput" >
                <option :value="1">已使用</option>
                <option :value="0">未使用</option>
              </select>
            </td>
            <td colspan="1" rowspan="1" data-col-key="operator"
                class="n-data-table-td n-data-table-td--last-col n-data-table-td--last-row">
              <div class="flex align-center">
                <a @click.prevent="handleSaveUpdate"  class="ml5 green pointer"><i
                    class="iconfont icon-bianji mr3"></i>保存
                </a>
              </div>
            </td>
          </tr>
          <tr>
            <td colspan="20">
              <k-empty :show="total == 0"></k-empty>
              <div @click="handleLoadMore" v-if="total > queryParams.pageSize && queryParams.pageNo < pages"
                   class="flex justify-center pointer">加载更多({{ total || 0 }})
              </div>
              <div v-if="total > queryParams.pageSize && queryParams.pageNo == pages"
                   class="flex justify-center c999 mt20 mb20">没有更多了
              </div>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script setup>
const currentObj = ref({
  code:"",
  opid:"",
  mark:0,
})
const total = ref(0)
const pages = ref(0)
const loadingFlag = ref(false)
const dataList = ref([])
const queryParams = reactive({
  keyword: "",
  pageNo: 1,
  mark:-1,
  pageSize: 20,
})

const handleSearch = async () => {
  queryParams.pageNo = 1
  dataList.value = []
  handleLoadData()
}

const handleSaveUpdate = async () => {
  if(!currentObj.value.opid){
    useMessage().error("请填写业务ID")
    return;
  }
  if(!currentObj.value.code){
    useMessage().error("请填写兑换码")
    return;
  }
  await useSaveUpdateAdminNoteCodeApi(currentObj.value)
  currentObj.value = {
    code:"",
    opid:"",
    mark:0,
  }
  queryParams.pageNo = 1
  dataList.value = []
  handleLoadData()
  useMessage().success("操作成功!!!")
}

const handleUpdateStatus = async (item,field,field2) => {
  await useUpdateAdminNoteCodeApi({
    id: item.id,
    field: field,
    value: item[field2]
  })
  useMessage().success("操作成功!!!")
}

const handleDelTemplate = async (item,index) => {
  await useLoginDialog()
  await useDelAdminNoteCodeApi(item.id)
  dataList.value.splice(index,1)
  total.value--
}

const handleLoadData = async () => {
  loadingFlag.value = true
  const resp = await useLoadAdminNoteCodeApi(queryParams)
  dataList.value = dataList.value.concat(resp.data.records)
  total.value = resp.data.total
  pages.value = resp.data.pages
  loadingFlag.value = false
}

const handleLoadMore = () => {
  queryParams.pageNo++
  handleLoadData()
}

definePageMeta({
  middleware: ["md-admin"],
  layout: "nindex",
})

onMounted(async () => {
  handleLoadData()
})

</script>

<style scoped lang="scss">
._land_23vdq_1 {
  display: flex;
  justify-content: center;
  width: 100%;
}


._land-container_23vdq_7 {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 80px 8%;
  max-width: 1280px;
  padding: 40px 40px 30px
}

._land-img_23vdq_14 {
  grid-column: span 7;
  max-width: 100%;
  object-fit: contain
}


._land-text_23vdq_11 {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  align-items: flex-start;
  justify-content: center
}

._land-text_23vdq_11 > section {
  font-weight: bold;
  font-size: 28px;
  color: var(--text-color-primary, var(--text-color-primary, #222529))
}

._land-text_23vdq_11 > ul {
  padding: 0;
  margin: 0;
  margin-top: 28px;
  margin-bottom: 48px;
  margin-left: 20px;
  line-height: 200%;
  list-style: disc;
  color: #666;
  font-size: 16px;
}

.gda-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
}

.gdesign-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  font-size: 20px;
}

.gda-btn > i, .gda-btn > span {
  display: inline-flex;
  pointer-events: none;
  line-height: 1;
}

.k-data-table-table th {
  background: #fafafc;
}

.k-data-table-table td,
.k-data-table-table th {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid rgba(239, 239, 245, 1);
}
</style>
